<template>
  <div class="logo-container" :style="{ width: size + 'px', height: size + 'px' }">
    <svg 
      viewBox="0 0 48 48" 
      fill="none" 
      xmlns="http://www.w3.org/2000/svg"
      :width="size"
      :height="size"
    >
      <path
        d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z"
        fill="#ECF5FF"
        stroke="#409EFF"
        stroke-width="2"
      />
      <path
        d="M31 18C31 21.866 27.866 25 24 25C20.134 25 17 21.866 17 18C17 14.134 20.134 11 24 11C27.866 11 31 14.134 31 18Z"
        fill="#409EFF"
      />
      <path
        d="M24 25C16.268 25 10 31.268 10 39H38C38 31.268 31.732 25 24 25Z"
        fill="#409EFF"
      />
      <path 
        d="M20 18H28M24 14V22" 
        stroke="white" 
        stroke-width="2" 
        stroke-linecap="round"
      />
    </svg>
  </div>
</template>

<script setup>
defineProps({
  size: {
    type: Number,
    default: 48
  }
})
</script>

<style scoped>
.logo-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.logo-container svg {
  transition: transform 0.3s ease;
}

.logo-container:hover svg {
  transform: scale(1.1);
}
</style> 